<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>     
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户列表</title>
<jsp:include page="/layout/_css.jsp"/>
</head>
<body>
	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="row">
				<div class="col-sm-12">
					  <div class="ibox float-e-margins">
					  	 <div class="ibox-title">
					  	 	<h5>用户列表</h5>
					  	 </div>
					  	 <div class="ibox-content">
			    			 <table id="table"></table>
					  	 	 <div class="btn btn-primary" onclick='deleteSelect()'>删除所选</div>
					  	 </div>
					  </div>
				</div>
			</div>	
		</div>
	</body>
</body>
<jsp:include page="/layout/_script.jsp"></jsp:include>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.js"></script>
<script>
$('#table').bootstrapTable({
    url: '${ctx}/UserServlet/listAllUser',
    columns: [
    	{
    	checkbox:true
    	},{
        field: 'u_name',
        title: '姓名',
        sortable:true
    }, {
        field: 'u_phone',
        title: '电话'
    }, {
    	field: 'caozuo',
        title: '操作',
        formatter:function(v1,v2,v3){
        	return ['<a class="remove" href="javascript:void(0)" title="Remove">',
                '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'].join('');
        },
        events:'caozuoEvents'
    }],
    pagination:true,
    pageSize:5,
    pageList:[1,5,10],
    search:true,
    showColumns:true,
    clickToSelect:true,
    sidePagination:'server',
    rowStyle:function(v,index){
    	var classes = ['active', 'success', 'info', 'warning', 'danger'];
        return {}; 
    }
});
window.caozuoEvents = {
        'click .remove': function (e, value, row) {
        	if(confirm('是否删除')){
	        	 $.get('${ctx}/UserServlet/removeUserById',{'u_id':row['u_id']},function(r){
	        		 if(r){
	        			layer.msg('删除成功');
	        			$('#table').bootstrapTable('refresh');
	        		 }else{
	        			layer.msg('删除失败');
	        		 }
	        	 });
        	}
        }
    };

function deleteSelect(){
	arr = $('#table').bootstrapTable('getSelections');
	arr2 = [];
	for(i in arr){
		arr2.push(arr[i]['u_id']);
	}
	str = JSON.stringify(arr2);
	$.get('${ctx}/UserServlet/removeAllUser',{'u_ids':str},function(r){
		if(r){
			layer.msg("删除了"+r+"行数据");
		    $('#table').bootstrapTable('refresh');
		}else{
			layer.msg("删除失败");
		}
	});	
};
</script>
</html>